var MENU = {
	addTab : function(tabId, caption, callback){
		$('#menu').append('<div id="'+tabId+'" class="tab" ><span>'+caption+'</span></div>');
		$('#menu').find('#' + tabId).click(callback);
	},
	addToTab : function (tabId, caption, callback){
		if($('#'+tabId).find('.items_con').length==0){
			$('#'+tabId).append('<div class="items_con">')
		}
		var items_con = $('#'+tabId).find('.items_con');
		items_con.append('<div class="tab item">'+caption+'</div>');
		var divs = items_con.find('div');
		divs.removeClass('bottom');
		var lastDiv = divs.last();
		lastDiv.addClass('bottom');
		lastDiv.click(callback);
	},
	init : function (){
		$(".tab").css("cursor", "pointer");	
		$('.tab').mouseover(function() {
			$(this).find('.items_con').stop().animate({opacity: 1}, 175);
			$(this).find('.items_con').css("left", $(this).position().left);
		});
		$('.tab').mouseout(function() {
			$(this).find('.items_con').stop().animate({opacity: 0}, 75);
			$(this).find('.items_con').css("left", -100500);
		});
		$('.tab, .item').click(function(event) {
			event.stopPropagation();
			$('#menu').find('.tab').each(function( index ) {
				if(this === event.currentTarget){
					$(this).addClass('selected');
				}else{
					$( this ).removeClass('selected');
				}
			});
			
			console.log(event);
			$('.items_con').stop().animate({opacity: 0}, 75);
			$('.items_con').css("left", -100500);
		});
	}
};

